<section>
    <h1 class="blue" data-id="intro">
        <i class="ace-icon fa fa-leaf green"></i>
        Issues
    </h1>
    <hr/>

    <div class="alert alert-danger">
        <button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
        Please note that most of the following issues have been resolved.
        <br/>
        Also some have more info as how to avoid them.
    </div>


    <div class="help-content">
        <h3 class="info-title smaller">1. Webkit browsers</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Webkit browers have a problem especially when resizing window due to over-optimization.
                    <br/>
                    They sometimes don't properly redraw layout or apply CSS property changes
                    and the workaround is to force redrawing or recalculating properties
                    for example by hiding and re-showing an element.
                    <br/>
                    This also may not work every time.
                </li>

                <li>
                    Webkit browsers have a fixed CSS z-index issue.
                    <br/>
                    According to:
                    <br/>
                    <span class="text-info">http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements</span>
                    <br/>
                    Chrome has decided to choose a different approach than what's mentioned in standard specs.
                    <br/>
                    So now with Firefox and IE,
                    a tooltip, popover or dropdown menu inside content area goes above fixed sidebar,
                    but below <b>.hover</b> submenus or when sidebar is minimized.
                    <br/>
                    But in Chrome, popovers, tooltips etc go below fixed sidebar.

                    <div class="hr hr-6"></div>

                    On the other hand when sidebar is fixed in Firefox,
                    text becomes fuzzy,
                    and if we apply <code>-moz-backface-visiblity:hidden</code> it gets better
                    which again manipulates stacking context (z-index).

                    <div class="hr hr-6"></div>
                    As a result, now fixed sidebar will be above all elements of content area, so
                    you should take care to show dropdowns, popovers or tooltips in a direction which
                    don't go below fixed sidebar.
                    <br/>
                    There is an example of changing tooltip direction in <a href="#elements.tooltip.notes"
                                                                            class="help-more">Tooltip section</a>

                    <div class="hr hr-6"></div>

                    The only cross-browser workaround to this is to detach a submenu from sidebar on mouse hover,
                    append it to body and then put it back in its place on mouseleave.
                </li>

                <li>
                    Old Safari versions have a flickering issue when sidebar has scrollbars and there is an animated
                    icon in content area.
                    <br/>
                    This may not be an issue with updated versions, but Safari for Windows has not been updated for a
                    long time which again is a rarely used browser in Windows.
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">2. Chrome</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Chrome has a problem with responding to click events on Ace buttons becauseo of "move down" effect.
                    <br/>
                    I have tried to fix this and its seems to be working now.
                    <br/>
                    But if the problem persists you can remove <code>button.btn:active</code> CSS rule
                    inside <code>assets/css/less/buttons.less</code>
                    or <code>assets/css/ace.css</code>
                </li>

                <li>
                    Most of the above webkit issues apply to Chrome as well.
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">3. Android Default Browser &amp; Chrome</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Android's default browser has an issues with <code>top:auto</code> when
                    sidebar or breadcrumbs is fixed
                <li>

                <li>
                    When sidebar is fixed, document is in RTL mode and there are animated icons inside navbar,
                    Android default browser will misplace sidebar.
                    <br/>
                    So you can avoid this by removing animated icons in RTL mode.
                </li>

                <li>
                    Android's default browser doesn't trigger window resize properly when address bar is hidden.
                    It's not a big deal
                </li>

                <li>
                    Chrome Browser on Android, doesn't respond to "mouse hover" events the way
                    Android's Default Browser or Android Firefox do.
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">4. iOS Safari</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    iOS default browser has a problem when you click on sidebar items
                    that are hidden at first and are shown when user scrolls down to view them
                </li>
                <li>
                    The link receives click event and all handlers are triggered.
                    <br/>
                    It just doesn't navigate to the url.
                </li>

                <li>
                    So I used <code>document.location = link_element.attr('href')</code>
                    to navigate to new url and it works.
                    <br/>
                    But if you are using custom handlers for a link and want to avoid navigation,
                    just add <code>data-link="false"</code> attribute to the link to disable navigation:
<pre data-language="html">
<a href="some/path/" data-link="false">
    don't navigate (iOS)
</a>
</pre>
                </li>


                <li>
                    Also when navbar is fixed and an input element receives focus,
                    fixed navbar won't be redrawn.
                    <br/>
                    Currently I have added a workaround which forces redraw of navbar.
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">5. RTL</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    When using settings box to switch RTL &amp; LTR mode several times,
                    some browsers may not redraw elements properly.
                </li>

                <li>
                    It's not an issue and when you make RTL-specific changes in your server side response,
                    browser will render pages correctly.
                </li>

                <li>
                    Also when sidebar is fixed and there are animated icons inside navbar,
                    Android default browser will misplace sidebar.
                    <br/>
                    So you can avoid this by removing animated icons in RTL mode.
                </li>
            </ul>
        </div>

    </div>
</section>